<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    class="form-add"
    fullscreen
    :visible.sync="visible">

    <div v-loading="loading" class="custom-font-form">
      <!-- 2021-12-31 lyf 处理前可以修改，但不显示这部分信息 -->
      <template v-if="dataForm.id != null && dataForm.solveStatus != null">
        <el-form  :model="dataForm"  ref="dataForm" v-if="dataForm.id != null" label-width="80px">
          <el-form-item label="创建时间"  >
            <span class="el-form-item__label"> {{dataForm.createTime}} </span>
          </el-form-item>
          <el-form-item label="创建人"  >
             <span class="el-form-item__label"> <user :value="dataForm.createId" /> </span>
          </el-form-item>
        </el-form>  
        <el-divider>表单信息</el-divider>
      </template>
       
      <ng-form-build class="ng-form-build" ref="formbuild" config="formConfig"  :formTemplate="formTemplate" :models="models" :renderPreview="preview" />  

    </div>
    
    <span slot="footer" class="dialog-footer" v-loading="isOnSubmit">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()" v-if="!preview" :disabled="isOnSubmit">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import {getInfo , saveOrUpdate} from '@/api/form/data'
  import { getAll as getDictAll } from '@/api/sys/dict'
  export default {
    data () {
      return {
        loading: false,
        visible: false,
        isOnSubmit: false,
        dataForm: {
          id: null,
          formData: '',
          formCode: '',
          formId: '',
          solveStatus: '',
          solveUserId: '',
          solveTime: '',
          solveInfo: '',
          createId: '',
          createTime: '',
          updateId: '',
          updateTime: '',
        },
        preview: false,
        models: {},
        formTemplate: {},
        dataRule: {
          formData: [
            { required: true, message: '填写数据不能为空', trigger: 'blur' }
          ],
          formCode: [
            { required: true, message: '模板code不能为空', trigger: 'blur' }
          ],
          formId: [
            { required: true, message: '模板ID不能为空', trigger: 'blur' }
          ] 
        },
        formConfig: { // 动态表单配置项
          dict: [] // 数据字典配置
        }
      }
    },
    methods: {
      init (id ,  formData , preview=false) {
        this.dataForm.id = id  
        this.dataForm.formCode = formData.code
        this.preview = preview
        this.visible = true
        this.isOnSubmit = false
        this.models = {}
        this.formTemplate = formData.templateData
        this.dataForm.formId = formData.id
        this.$nextTick(() => {
           
          if (this.dataForm.id) {
            getInfo(this.dataForm.id).then(({data}) => {
              if (data && data.code === 0) {
                if(data.data.formData) {
                  this.models = data.data.formData 
                }
                this.dataForm.formData = data.data.formData 
                this.dataForm.solveStatus = data.data.solveStatus
                this.dataForm.solveUserId = data.data.solveUserId
                this.dataForm.solveTime = data.data.solveTime
                this.dataForm.solveInfo = data.data.solveInfo
                this.dataForm.createId = data.data.createId
                this.dataForm.createTime = data.data.createTime
                this.dataForm.updateId = data.data.updateId
                this.dataForm.updateTime = data.data.updateTime
              }
            })
          }
          // 2022-03-10 lyf 获取数据字典信息
          getDictAll().then(({data})=> {
            this.formConfig.dict = data.data
          })
     
        })
      },
      // 表单提交
      dataFormSubmit () {

        this.$refs.formbuild.validator().then((valid)=>{
          if(valid){
            this.isOnSubmit = true
           
            const form_ = {
                'id': this.dataForm.id || undefined,
                'formData': this.models,
                'formCode': this.dataForm.formCode,
                'formId': this.dataForm.formId 
              }
            saveOrUpdate(form_).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 500 
                })
                this.visible = false
                this.$emit('refreshDataList')
              } else {
                this.$message.error(data.msg)
              }
            }).finally(()=>{
              this.isOnSubmit = false
            })
          } 
        })

        
      }
    }
  }
</script>
<style lang="scss">
.custom-font-form {
  .el-form-item__content {
    font-size: 13px;
  }

  .ng-form-build {
    padding: 10px;
  }
}
  
</style>
